<template>
  <el-row :gutter="10" class="links">
    <el-col :span="24" class="mg-b-10" v-if="isSort">
      <div class="screen-item">
        <div class="screen-title">
          <i class="el-icon-price-tag"></i>
          筛选
        </div>
        <div class="screen-body">
          <el-select
            v-model="selectValue"
            multiple
            :multiple-limit="5"
            filterable
            :loading="selectLoading"
            default-first-option
            :clearable="true"
            placeholder="请选择最多5个标签"
            size="small"
            @change="selectChange">
            <el-option
              v-for="item in tagList"
              :key="item.labelName"
              :label="item.labelName"
              :value="item.labelName">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="screen-item">
        <div class="screen-title">
          <i class="el-icon-sort"></i>
          排序
        </div>
        <div class="screen-body">
          <el-radio-group v-model="radio" size="small" @change="radioChange">
            <el-radio-button label="默认"></el-radio-button>
            <el-radio-button label="时间"></el-radio-button>
            <el-radio-button label="评论"></el-radio-button>
            <el-radio-button label="浏览"></el-radio-button>
            <el-radio-button label="收藏"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-col>
    <client-only>
      <el-skeleton :animated="true" :loading="links_loading" :rows="0" :throttle="200">
        <template slot="template">
          <el-col class="card-box mg-t-10" :xs="12" :sm="8" :md="6" v-for="(item,index) in 12" :key="index">
            <el-card class="border-radius pointer" shadow="hover" :body-style="{padding: '8px'}">
              <el-row style="display: flex;align-items: center">
                <el-col :span="6">
                  <el-skeleton-item variant="image" style="width: 40px; height: 40px" />
                </el-col>
                <el-col :span="14">
                  <h2 class="fs-14 overflow_omit" style="margin-bottom: 5px"><el-skeleton-item variant="p" style="width: 100%;" /></h2>
                  <p class="fs-12 f-gray-color overflow_omit"><el-skeleton-item variant="p" style="width: 100%;" /></p>
                </el-col>
                <el-col class="text-center" :span="4">
                  <el-tooltip effect="dark" content="链接直达" placement="right">
                    <img class="card-img" src="@/static/image/right.svg" />
                  </el-tooltip>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="24">
            <div class="text-center overflow-scroll">
              <el-skeleton-item variant="p" style="margin-top: 15px;width: 100%; height: 20px" />
            </div>
          </el-col>
        </template>
        <template>
          <template v-if="isShow">
            <el-col class="card-box mg-t-10" :xs="12" :sm="8" :md="6" v-for="(item,index) in linksList" :key="index" v-if="item.webStatus == '1'">
              <div @click="goLinks(item.id)">
                <el-card class="border-radius pointer" shadow="hover" :body-style="{padding: '8px'}">
                  <el-row style="display: flex;align-items: center">
                    <el-col :span="6">
                      <el-image :alt="item.webName"  class="img-sm-size img" style="width: 40px;height: 40px;border-radius: 100%" :src="item.webIcon ? imgPrefix + item.webIcon:''">
                        <div slot="error" class="image-slot">
                          <img :alt="item.webName" class="img-sm-size" style="width: 40px; height: 40px" src="@/static/image/img_error.png"/>
                        </div>
                      </el-image>
                    </el-col>
                    <el-col :span="14">
                      <h2 class="fs-14 overflow_omit" style="margin-bottom: 5px" v-html="item.webName"></h2>
                      <p class="fs-12 f-gray-color overflow_omit">{{ item.webDetails }}</p>
                    </el-col>
                    <el-col class="text-center" :span="4">
                      <el-tooltip effect="dark" content="链接直达" placement="right">
                        <a target="_blank" :href="'//' + item.webUrl">
                          <img class="card-img" src="@/static/image/right.svg" />
                        </a>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </el-col>
            <el-col :span="24" v-if="isPage">
              <div class="text-center overflow-scroll">
                <el-row class="pd-10">
                  <el-col :span="24">
                    <el-pagination
                      background
                      layout="total, prev, pager, next, jumper"
                      :small="true"
                      :total="total"
                      :page-size="queryParams.pageSize"
                      :current-page="queryParams.pageNum"
                      @current-change="currentChange">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="24">
              <el-empty :image-size="200" :description="(emptyText === null) ? '暂无数据':emptyText">
                <nuxt-link to="/push" v-if="isShowSubmit">
                  <el-button type="primary" size="small">网站提交</el-button>
                </nuxt-link>
              </el-empty>
            </el-col>
          </template>
        </template>
      </el-skeleton>
    </client-only>
  </el-row>
</template>

<script>
export default {
  name: "Links",
  props: {
    //分类ID
    classifyId: {
      type: Number
    },
    //显示数量
    listSize: {
      type: Number,
      default: 12
    },
    //是否显示分页
    isPage: {
      type: Boolean,
      default: false
    },
    //是否显示排序
    isSort: {
      type: Boolean,
      default: false
    },
    //搜索关键字
    searchKey: {
      type: String,
      default: null
    },
    //用户ID：用于查询用户收藏的链接
    userId: {
      type: Number,
      default: null
    },
    //未找到结果提示
    emptyText: {
      type: String,
      default: null
    },
    //是否显示提交按钮
    isShowSubmit: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return{
      //图片链接前缀
      imgPrefix: process.env.NUXT_APP_BASE_API,
      links_loading: true,
      //链接列表
      linksList: [],
      //评论总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        classifyId: null,
        webName: null,
        webUrl: null,
        webDetails: null,
        webStatus: null,
        labelList: null,
        createBy: null,
        orderByColumn: null,
        isAsc: null
      },
      //标签列表
      tagList: [],
      //选中的标签
      selectValue: [],
      //标签加载中
      selectLoading: true,
      //单选值
      radio: "默认",
      //是否显示
      isShow: true
    }
  },
  mounted() {
    this.queryParams.webName = this.searchKey;
    this.queryParams.pageSize = this.listSize;
    this.queryParams.classifyId = this.classifyId;
    if(this.userId != null){
      this.getCollectList();
    }else{
      this.getList();
      if(this.isSort){
        this.getLabelList();
      }
    }
  },
  methods: {
    //获取链接列表
    getList(isHighlighted){
      this.links_loading = true;
      this.$api_links.getList(this.queryParams).then(res => {
        if(res.code === 200){
          this.links_loading = false;
          this.linksList = res.rows;
          this.total = res.total;
          this.isShow = (res.total !== 0);
          //增加搜索高亮
          if(isHighlighted){
            this.linksList.forEach(item => {
              item.webName = this.highlight(item.webName);
            });
          }
        }
      });
    },
    //链接跳转
    goLinks(id){
      this.$router.push("/read/" + id);
    },
    //翻页
    currentChange(page){
      this.queryParams.pageNum = page;
      if(this.userId != null){
        this.getCollectList();
      }else{
        this.getList();
      }
    },
    //Radio发生改变时
    radioChange(e){
      switch (e) {
        case "默认":
          this.queryParams.isAsc = null;
          this.queryParams.orderByColumn = null;
          this.getList();
          break;
        case "时间":
          this.queryParams.isAsc = "desc";
          this.queryParams.orderByColumn = "create_time";
          this.getList();
          break;
        case "评论":
          this.queryParams.isAsc = "desc";
          this.queryParams.orderByColumn = "commentsNum";
          this.getList();
          break;
        case "浏览":
          this.queryParams.isAsc = "desc";
          this.queryParams.orderByColumn = "web_views";
          this.getList();
          break;
        case "收藏":
          this.queryParams.isAsc = "desc";
          this.queryParams.orderByColumn = "web_collection";
          this.getList();
          break;
      }
    },
    //搜索关键词
    searchKeyChange(val){
      this.queryParams.webName = val;
      this.getList(true);
    },
    //关键字高亮
    highlight(text){
      let key = this.queryParams.webName;
      if(key){
        let reg = new RegExp(key, "g");
        return text.replace(reg, "<b class='f-red-color'>" + key + "</b>");
      }else{
        return text;
      }
    },
    //获取标签列表
    getLabelList(){
      this.$api_label.getList(999, 1).then(res => {
        if(res.code === 200){
          this.tagList = res.rows;
          this.selectLoading = false;
        }
      });
    },
    //选中标签发送变化时执行
    selectChange(value){
      this.selectValue = value;
      let labelList = "";
      let i = 0;
      value.forEach(item => {
        i++;
        if(i === value.length){
          labelList += item;
        }else{
          labelList += item + ",";
        }
      });
      this.queryParams.labelList = labelList;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //查询用户收藏的链接
    getCollectList(){
      this.$api_links.getCollectList(this.userId, this.queryParams).then(res => {
        if(res.code === 200){
          this.links_loading = false;
          this.linksList = res.data.list;
          this.total = res.data.total;
          this.isShow = res.data.total !== 0;
        }
      });
    }
  }
}
</script>

<style scoped>
.links{
  margin-top: -10px;
}
.card-img{
  width: 22px;
  height: 22px;
}
.screen-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.screen-item:last-child{
  margin: 0;
}
.screen-title{
  width: 100px;
  margin-right: 15px;
}
.screen-body{
  width: 100%;
}
.screen-body>div{
  width: 100%;
}
</style>
